<template>
	<view class="page_box">
		<view class="bgc-nr login-box">
			<view class="center-login">
				<view class="header-title mb29 mt189 ">
					<text>填写资料</text>
				</view>

				<view class="text-center ww100 mb126">
					<text style="color: #FFFFFF; opacity: 0.5;">真实信息可提高自身魅力和匹配度</text>
				</view>


				<view class="h110 ww80 lh110 flex bor-btn align-center">
					<text>昵称</text>
					<view class=" flex align-center pl26">
						<view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;">
						</view>
						<input type="text" v-model="userName" maxlength="8" placeholder="最多8个字" placeholder-style="color: #999999;
							font-family: PingFang SC; fonst-size: 28rpx" />
					</view>
				</view>
				<view class="h110 ww80 lh110 flex bor-btn align-center justify-between" @click="agesPicker = true">
					<view class="">
						<text class="mr40">年龄</text>
						{{ageInfo}}
					</view>
					<view class=" flex align-center pl26">
						<i class="cuIcon-right"></i>
					</view>
				</view>
				<view class="h110 ww80 lh110 flex bor-btn align-center">
					<!-- <view class=" flex align-center pl26"> -->
					<input type="text" v-model="codeInit" placeholder="输入邀请码（选填）"
						placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx" />
					<!-- </view> -->
				</view>


				<view class=" ww80 flex bor-btn1 align-center">
					<view class="pt41">
						<view class="mb33">
							<u-radio-group active-color="#3EBC9F" shape="square" @change="radioGroupChange">
								<u-radio v-for="(item, index) in list" :key="index" :name="item.sex"
									:disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="">
							<text style="color:#40C6A8 ;" class="mr8">*</text>
							<text> 您的性别注册后不可更改</text>
						</view>
					</view>
				</view>



				<view class="btn-bgc mb336">
					<button type="default" @click="userInfo" class="cu-btn mt194 r40 h80 ww80 " style="color: #333333;">
						<text>完成</text>
					</button>
				</view>
			</view>
		</view>



		<u-picker v-model="agesPicker" @confirm="confirmAge" mode="time"></u-picker>


		<yy-tip :isCustom="false" />

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agesPicker: false,
				ageInfo: '',
				list: [{
						name: '男',
						sex: '1',
						disabled: false
					},
					{
						name: '女',
						sex: '0',
						disabled: false
					}
				],
				value: '男',
				userName: '',
				sex: '',
				codeInit: '',
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			confirmAge(e) {
				var timestamp = e.timestamp
				this.ageInfo = +e.year + '-' + e.month + '-' + e.day
				//出生时间 毫秒
				var birthDayTime = new Date(this.ageInfo).getTime();
				//当前时间 毫秒
				var nowTime = new Date().getTime();
				//一年毫秒数(365 * 86400000 = 31536000000)
				
				this.ageInfo = Math.ceil((nowTime - birthDayTime) / 31536000000);
			},

			radioGroupChange(e) {
				this.sex = e
				uni.setStorageSync('sex', e)
				console.log('e==>', e);
			},

			material() {
				this.l.to('/pages/register/video')
			},
			
			// 确定填写的信息 C:/Users/Administrator/Desktop/社交/pages/register/information.vue
			async userInfo() {
				if (this.userName < 0 || this.ageInfo == '' || this.sex == '' || this.codeInit == '') return this.l.msgg('信息不能为空!')
				let res = await this.$u.put('api/user/registerModifyUser', {
					nickName: this.userName,
					code: this.codeInit, // 邀请码
					sex: this.sex, // 性别
					age: this.ageInfo, // 年龄
					id: uni.getStorageSync('user').id, // 用户的id
				}, {})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					uni.setStorageSync('userInfo', res.data)
					if (this.sex == 1) {
						this.l.to('/pages/tab/index')
					} else {
						this.l.to('/pages/register/video')
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {

		.login-box {
			width: 100%;
			height: 100%;
			background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/log.png');


			.center-login {

				.header-title {
					font-size: 46rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.bor-btn {
				font-size: 28rpx;
				color: #FFFFFF;
				margin: 0 auto;
				font-family: PingFang SC;
				border-bottom: 1rpx solid #3A2D28;
			}

			.bor-btn1 {
				font-size: 28rpx;
				color: #FFFFFF;
				margin: 0 auto;
				opacity: 0.5;
				font-family: PingFang SC;
			}

			.btn-bgc {
				width: 100%;
				color: #333333;
				text-align: center;
			}

			.btn-text {
				width: 100%;
				color: #B3B3B3;
				text-align: center;
			}
		}
	}

	/deep/ .u-mode-center-box[data-v-ece9ae1c] {
		background-color: transparent;

		.btn {
			color: #333333;
			text-align: center;
			margin: 0 auto 57rpx;
		}

		.back {
			color: #333333;
			text-align: center;
			margin: 48rpx auto 0;
		}
	}
</style>
